import React, { useEffect, useState } from 'react';
import { Grid, Icon, Toast } from 'antd-mobile';
import { history } from 'umi';
import IndexImg from 'dic/index';
import Role from 'dic/role';
import { getDemandNum, getVisNum, updateVisNum } from 'ser/actions';
import IMG from 'static/index/banner.png';
import Title1 from 'static/index/title1.png';
import Title2 from 'static/index/title2.png';
import B1 from 'static/index/b1.png';
import B2 from 'static/index/b2.png';

import './index.less';

export default function Index() {
  const [demandNum, setDemandNum] = useState({});
  const [visNum, setVisNum] = useState(0);
  useEffect(() => {
    async function fetchData() {
      const demandRes = await getDemandNum(); // 仓库需求数
      const visRes = await getVisNum(); // 查询访问量
      const updateRes = await updateVisNum(); // 更新访问量
      if (demandRes.code === 0) {
        setDemandNum(demandRes);
      }
      if (visRes.code === 0) {
        setVisNum(visRes.rows);
      }
    }
    fetchData();
  }, []);
  function toDetail(value) {
    history.push({
      pathname: '/news',
      query: { type: value },
    });
  }
  function gridClick(item) {
    const { key, msg, path, type } = item;
    const roleType = sessionStorage.getItem('companyType');
    const isComplete = sessionStorage.getItem('isComplete');
    const token = sessionStorage.getItem('token');
    if (key) {
      if (!token) {
        history.push('/login');
        return;
      } else {
        if (roleType === '02') {
          key !== roleType ? Toast.info(msg, 1) : history.push(path);
        } else {
          if (key === '02') {
            Toast.info(msg, 1);
          } else {
            if (isComplete == 'false') {
              //企业信息未完善
              history.push('/updateInfo');
            } else {
              history.push(path);
            }
          }
        }
      }
    } else {
      history.push({
        pathname: path,
        query: { type },
      });
    }
  }
  return (
    <div className="index">
      <img src={IMG} alt="" />
      {!sessionStorage.getItem('token') ? (
        <div className="loginIn" onClick={() => history.push('/login')}>
          {' '}
          点击登录{' '}
        </div>
      ) : (
        <div className="loginIn" onClick={() => history.push('/modify')}>
          {' '}
          已登录，帐号管理{' '}
        </div>
      )}
      <div className="info">
        <div className="title">
          <div>
            <p style={{ color: '#389B7B' }}>
              {demandNum.transportCompanyNum || 0}
            </p>
            <p>供应企业</p>
          </div>
          <div>
            <p style={{ color: '#E97315' }}>{demandNum.storeCompanyNum || 0}</p>
            <p>需求企业</p>
          </div>
          <div>
            <p style={{ color: '#4D5EC9' }}>{demandNum.sourcingNum || 0}</p>
            <p>运力需求</p>
          </div>
          <div>
            <p style={{ color: '#333333' }}>{demandNum.storingNum || 0}</p>
            <p>仓库需求</p>
          </div>
        </div>
        <div className="menuItems">
          <p className="visNum">访问量：{visNum > 9999 ? '9999+' : visNum}</p>
          <Grid data={IndexImg} columnNum={4} onClick={i => gridClick(i)} />
        </div>
        <div className="newsInfo" onClick={() => toDetail('policyNews')}>
          <div>
            <img src={Title1} alt="" />
          </div>
          <div>
            <p>商务部等5部门关于印发《商贸物流发展“十三五”规划》的通知</p>
            <p>
              国务院办公厅关于推进电子商务与快递物流协同发展的意见国办发〔2018〕1号
            </p>
            <p>
              国务院办公厅关于印发推进运输结构调整三年行动计划（2018—2020年）的通知国办发〔2018〕91号
            </p>
          </div>
          <div>
            <Icon type={'right'} />
          </div>
        </div>
        <div className="newsInfo">
          <div>
            <img src={Title2} alt="" />
          </div>
          <div>
            <p></p>
            <p></p>
          </div>
          <div>{/* <Icon type={'right'} /> */}</div>
        </div>
        <div className="infoImg">
          <img
            src={B1}
            alt=""
            onClick={() => {
              const token = sessionStorage.getItem('token');
              if (!token) {
                history.push('/login');
                return;
              }
              if (sessionStorage.getItem('companyType') === '02') {
                history.push('/fullBack');
              } else {
                Toast.info('非物流企业不可访问', 1);
              }
            }}
          />
          <img src={B2} alt="" />
        </div>
      </div>
      <div className="compInfo">
        <p>主办单位：成都市交通运输局</p>
        <p>建设单位：成都市交通运输局信息中心</p>
        <p>支持单位：成都市物流协会</p>
        <p>技术支持：成都智元汇信息技术股份有限公司</p>
        <p>咨询电话：(028) - 8532 8686</p>
      </div>
    </div>
  );
}
